<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		 * {
			margin:0;
			padding:0;
			list-style:none;
		}
		.imgbox {
			width:640px;
			height:220px;
			position:absolute;
			left:50%;
			top:50%;
			transform:translate(-50%,-50%);
		}
		.imgbox li {
			width:150px;
			height:100px;
			margin:10px 0px 0px 10px;
			float:left;
		}
		.imgbox li img {
			width:100%;
			height:100%;
			display:block;
		}
		.showimg {
			width:600px;
			height:400px;
			position:absolute;
			left:0;
			right:0;
			top:0;
			margin:auto;
			bottom:0;
			background:#fff;
			box-shadow:0px 0px 0px 1000px rgba(0,0,0,0.7);
			z-index:10;
			transform:scale(0,0);
			transition:transform 1s;
		}
		.showimg  img {
			width:100%;
			height:100%;
		}
		.btnL,.btnR {
			width:100px;
			height:200px;
			position:absolute;
			top:0;
			bottom:0;
			margin:auto;
		}
		.btnL {
			background:url(http://www.jq22.com/demo/jqueryWflbt201803192258/images/left2.png);
			background-size:100px 200px;
			left:0;
		}
		.btnR {
			background:url(http://www.jq22.com/demo/jqueryWflbt201803192258/images/right2.png);
			background-size:100px 200px;
			right:0;
		}
		.close {
			width:50px;
			height:50px;
			background:url(http://www.jq22.com/tp/45f352e9-fc7f-44ed-9990-2a100a0c422b.png);
			background-size:50px 50px;
			border-radius:50%;
			position:absolute;
			right:-25px;
			top:-25px;
		}
		body .active {
			transform:scale(1,1);
		}

		</style>
	</head>
	<body>
		<ul class="imgbox">
		    <li><img src="http://www.jq22.com/img/cs/500x300-1.png" alt=""></li>
		    <li><img src="http://www.jq22.com/img/cs/500x300-2.png" alt=""></li>
		    <li><img src="http://www.jq22.com/img/cs/500x300-3.png" alt=""></li>
		    <li><img src="http://www.jq22.com/img/cs/500x300-4.png" alt=""></li>
		    <li><img src="http://www.jq22.com/img/cs/500x300-5.png" alt=""></li>
		    <li><img src="http://www.jq22.com/img/cs/500x300-6.png" alt=""></li>
		    <li><img src="http://www.jq22.com/img/cs/500x300-7.png" alt=""></li>
		    <li><img src="http://www.jq22.com/img/cs/500x300-8.png" alt=""></li>
		</ul>
		<div class="showimg">
		    <img src="" alt="">
		    <div class="btnL"></div>
		    <div class="btnR"></div>
		    <div class="close"></div>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script>
			$(function(){
				var imgbox = $('.imgbox');
				var lise = $('li', imgbox);
				var show = $('.showimg');
				var leftbtn = $('.btnL');
				var rightbtn = $('.btnR');
				var close = $('.close');
				var num = 0;
				$(document).ready(function() {
				    var num = $(this).index();
				    lise.on('click', function() {
				        var src = $('img', this).prop('src');
				        $('img', show).prop('src', src);
				        show.addClass('active');
				    })
				    close.click(function() {
				        show.removeClass('active');
				    })
				    rightbtn.click(function() {
				        num++;
				        if (num >= lise.length) {
				            num = 0;
				        }
				        var url = lise.eq(num).find('img').prop('src');
				        $('img', show).prop('src', url);
				    })
				    leftbtn.click(function() {
				        num--;
				        if (num <= 0) {
				            num = lise.length;
				        }
				        var url = lise.eq(num).find('img').prop('src');
				        $('img', show).prop('src', url);
				    })
				})
							
			})
		</script>
	</body>
</html>
